{% extends "global/Page.html" %}
{#上面那个会压紧样式 先注释掉#}
{% load otree static %}

{% block title %}
{% endblock %}
{% block content %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/sweetalert.css' %}">
    <script type="text/javascript" src="{% static 'js/sweetalert-dev.js' %}"></script>
    <style type="text/css">
.text{
  color: black;
  text-align: center;
  display: flex;
  margin-top: 20px;
  height: 10vh !important;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  line-height: 28px;
  margin-top:50px;
}
.btn{
  display:block;
  margin:0 auto;
  width: 180px;
  height: 85px;
  border-radius: 4px;
  border:none;
  transition: all 0.5s;
  cursor: pointer;
  /* vertical-align: middle; */
  font-size: 32px;
  margin-top: 50px;
  background: rgb(57, 92, 128);
}
.btn span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: aliceblue;
}
.btn span:after{
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 5px;
  right: -20px;
  transition: 0.5s;
}
.btn:hover span{
  padding-right:40px;
}
.btn:hover span:after{
  opacity: 1;
  right: 0;
}
table{
  width: 70%;
  margin:20px auto;
  font-size: 27px;
  /* border: 2px solid black; */
}
#sumTime{
  font-size: 29px;
  font-weight: 700;
}
th{
  text-align: right;
  display: none;
}
.td{
  height:50px;
  border: 1px solid black;
}
input{
  width: 80px;
  height:30px;
  font-size: 25px;
  background: rgb(228, 225, 225);
  border: 0.5px solid black;
  box-shadow: 3px 3px 1px rgb(126, 126, 124);
  border-radius: 3px;
  margin: 3px;
  cursor: pointer;
}
button{
  width: 90px;
  height: 40px;
  font-size: 17px;
  background-color: rgb(181, 176, 176);
  cursor: pointer;
  margin-top: 15px;
}
</style>
<script type="text/javascript">
window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var divset=document.getElementsByTagName("td");
            divset[1].style.display="block";
            divset[2].style.display="block";
            divset[3].style.display="table-cell";
            divset[4].style.display="table-cell";

        	for (var i = 0; i<divset.length;i++) {
        		   divset[i].style.display="table-cell";
        		   divset[i].removeAttribute("hidden");
        		 };
        var btn = document.getElementById("btn");
        btn.style.display = "none";
        var sumTime = document.getElementById("sumTime");
                {#var time=300;#}
                var time=60;
                var timer = setInterval(function(){
                  time=time-1;
                  var minute=parseInt(time/60);
                  var second=parseInt(time%60);
                  {#sumTime.innerHTML='距比赛结束还剩'+minute+'分'+second+'秒';#}
                  sumTime.innerHTML='距比赛结束还剩'+second+'秒';
                  if(minute==0 && second==0){
                   clearInterval(timer);
                   submit.click();

                  }
              },1000);
          var submit = document.getElementById("submit");
          submit.onclick = function(){
              clearInterval(timer);
              {#swal("提交成功!");#}
            }
        }
    }
</script>
</head>
<body>
    <div class="container">
        <div class="text">
          <p>计算题比赛——请完成20道计算题</p>
        </div>
{#        所有不是用于提交的表单都要加上 type="button"#}
        <button type="button" class="btn" id="btn" >
          <span>开始比赛</span>
        </button>

        <table>
            <td id="sumTime" colspan='2' hidden style="text-align: right;">
{#              <b>限时：5分00秒</b>#}
                <b>限时：60秒</b>
            </td>
            <tr>
              <td class="td"  hidden>
                  <span>{{ subsession.RandomNumber_1 }}+{{ subsession.RandomNumber_2 }}=</span>
                  <input name="answer_1" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td"  hidden>
                  <span>{{ subsession.RandomNumber_3 }}+{{ subsession.RandomNumber_4 }}=</span>
                  <input name="answer_2" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_5 }}+{{ subsession.RandomNumber_6 }}=</span>
                  <input name="answer_3" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_7 }}+{{ subsession.RandomNumber_8 }}=</span>
                  <input name="answer_4" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_9 }}+{{ subsession.RandomNumber_10 }}=</span>
                  <input name="answer_5" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_11 }}+{{ subsession.RandomNumber_12 }}=</span>
                  <input name="answer_6" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_13 }}+{{ subsession.RandomNumber_14 }}=</span>
                  <input name="answer_7" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_15 }}+{{ subsession.RandomNumber_16 }}=</span>
                  <input name="answer_8" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_17 }}+{{ subsession.RandomNumber_18}}=</span>
                  <input name="answer_9" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_19 }}+{{ subsession.RandomNumber_20 }}=</span>
                  <input name="answer_10" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_21 }}+{{ subsession.RandomNumber_22 }}=</span>
                  <input name="answer_11" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_23 }}+{{ subsession.RandomNumber_24 }}=</span>
                  <input name="answer_12" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" >
              </td>
            </tr>
            <tr>
              <td class="td"  hidden>
                  <span>{{ subsession.RandomNumber_25 }}+{{ subsession.RandomNumber_26 }}=</span>
                  <input name="answer_13" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
              <td class="td"  hidden>
                  <span>{{ subsession.RandomNumber_27}}+{{ subsession.RandomNumber_28 }}=</span>
                  <input name="answer_14" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_29 }}+{{ subsession.RandomNumber_30 }}=</span>
                  <input name="answer_15" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_31 }}+{{ subsession.RandomNumber_32 }}=</span>
                  <input name="answer_16" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_33 }}+{{ subsession.RandomNumber_34 }}=</span>
                  <input name="answer_17" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_35 }}+{{ subsession.RandomNumber_36 }}=</span>
                  <input name="answer_18" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
            </tr>
            <tr>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_37 }}+{{ subsession.RandomNumber_38 }}=</span>
                  <input name="answer_19" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
              <td class="td" hidden>
                  <span>{{ subsession.RandomNumber_39 }}+{{ subsession.RandomNumber_40 }}=</span>
                  <input name="answer_20" type="text" maxlength="4"  onkeyup="value=value.replace(/[^\d]/g,'')">
              </td>
            </tr>

            <tr>
              <td colspan='2' style="text-align: center;" hidden>
                <button type="submit" id="submit">立即提交</button>
              </td>
            </tr>
        </table>
        </div>
</body>
</html>



{% endblock %}




